<template>
    <div style="height:100%;width:100%">
        <div class="wastetable">
            <thead>
            <tr>
                <th class="zi">时间</th>
                <th class="zi">回收人</th>
                <th class="zi">医院名称</th>
            </tr>
            </thead>
            <div class="content">
                <div class="scroll-content">
                    <tbody
                            id="con1"
                            ref="con1"
                            class="anim"
                            @mouseenter="mEnter"
                            @mouseleave="mLeave"
                    >
                    <tr v-for="(displayData,index) in displaysData" :key="index">
                        <td class="zl">{{displayData.createTime}}</td>
                        <td class="zl">{{displayData.recyclePersonName}}</td>
                        <td class="zl">
                            <span style="display: block;" class="text-cut">{{displayData.customerName}}</span>
                        </td>
                    </tr>
                    </tbody>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getAction } from '@/api/manage'
    import { mixinDevice } from '@/utils/mixin'

    export default {
        mixins: [mixinDevice],
        props: {
            viewHeight: {
                //可视窗口
                type: [Number, String],
                default: '200px'
            },
            // 父组件传递过来的值
            areaCode: {
                type: String,
                default: ''
            },
            areaLevel: {
                type: String,
                default: ''
            },
            realRecycleData:{
                type: Object,
                default: ''
            }
        },
        data() {
            return {
                animate: false,
                displaysData: [],
                activeIndex: 0
            }
        },
        created() {
            this.getMedicalWasteData()
        },

        watch: {
            // 如果 `areaCode` 发生改变，这个函数就会运行
            areaCode: function(newValue, oldValue) {
                this.getMedicalWasteData()
            },
            realRecycleData: function(newValue, oldValue) {
                this.getData()
            },
        },

        methods: {
            async getMedicalWasteData() {
                let params = {
                    areaCode: this.areaCode,
                    areaLevel: this.areaLevel
                }
                let res = await getAction('/hc/Statistical/InfusionBottleLowRight', params)
                if (res && res.success) {
                    let list = []
                    res.result.forEach((item,index) => {
                        list.push({
                            createTime : item['createTime'],
                            recyclePersonName : item['recyclePersonName'],
                            customerName : item['customerName'],
                        })
                    })
                    this.displaysData = list
                }
            },
            // 根据父组件传递过来的数据封装
            getData(){
                if(this.realRecycleData != ''){
                    this.displaysData.unshift({
                        createTime: this.realRecycleData.createTime,
                        recyclePersonName: this.realRecycleData.recyclePersonName,
                        customerName: this.realRecycleData.customerName
                    })
                }
                this.displaysData = this.displaysData.splice(0,10)
            },
            scroll() {
                let con1 = this.$refs.con1
                // con1.style.marginTop = '-34px'
                this.animate = !this.animate
                var that = this // 在异步函数中会出现this的偏移问题，此处一定要先保存好this的指向
                setTimeout(function() {
                    that.displaysData.push(that.displaysData[0])
                    that.displaysData.shift()
                    // con1.style.marginTop = '0px'
                    that.animate = !that.animate // 这个地方如果不把animate 取反会出现消息回滚的现象，此时把ul 元素的过渡属性取消掉就可以完美实现无缝滚动的效果了
                }, 1000)
            },
            mEnter() {
                clearInterval(this.timer1)
            },
            mLeave() {
                this.timer1 = setInterval(this.scroll, 1000)
            }
        },
        computed: {},
        mounted() {
            this.timer1 = setInterval(this.scroll, 1000)
        }
    }
</script>
<style lang="less" scoped>

    .anim {
        transition: all 2s;
    }

    .wastetable {
        thead {
            display: table;
            width: 100%;
            table-layout: fixed;

            tr {
                display: table-row;
                vertical-align: inherit;
                border-color: inherit;

                /*.zi:nth-child(1) {*/
                /*    width: 50%;*/
                /*}*/

                /*.zi:nth-child(2) {*/
                /*    width: 18%;*/
                /*}*/

                /*.zi:nth-child(3) {*/
                /*    width: 12%;*/
                /*}*/

                /*.zi:nth-child(4) {*/
                /*    width: 10%;*/
                /*    padding-right: 8px;*/
                /*}*/

                /*.zi:nth-child(5) {*/
                /*    width: 10%;*/
                /*}*/
            }
        }

        th {
            font-size: 0.2rem;
            color: #7ca6f4;
            line-height: 25px;
            text-align: center;
        }

        td {
            padding: 10px 2px 0;
            font-size: 0.2rem;
            color: #7ca6f4;
            line-height: 25px;
            text-align: center;
        }

        .content {
            //margin-top: 10px;
            width: 100%;
            height: 100%;
            overflow: hidden;

            tbody {
                display: block;
                // height: 195px;
                overflow-y: hidden;

                tr {
                    display: table;
                    width: 100%;
                    table-layout: fixed;

                    /*.zl:nth-child(1) {*/
                    /*    width: 50%;*/
                    /*}*/

                    /*.zl:nth-child(2) {*/
                    /*    width: 18%;*/
                    /*}*/

                    /*.zl:nth-child(3) {*/
                    /*    width: 12%;*/
                    /*}*/

                    /*.zl:nth-child(4) {*/
                    /*    width: 10%;*/
                    /*}*/

                    /*.zl:nth-child(5) {*/
                    /*    width: 10%;*/
                    /*}*/
                }
            }

            //   position: absolute;
        }
    }

    // thead {
    //   padding: 10px 0 !important;
    //   z-index: 10;
    //   background-image: linear-gradient(to right, #0e1e66, #0c1b49, #0a143f, #0b1440, #0c1645, #0b1342);
    //   overflow: hidden;
    // }
</style>
